<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <script src="js/vue.global.3.5.13.js"></script>
    <script src="js/axios.min.0.24.0.js"></script>
    <script src="js/index.full.js"></script>
    <script src="js/icons-vue.js"></script>
    <script src="js/zh-cn.js"></script>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div style="height: 100px"></div>
<div id="app">
    <el-form :label-width="100" :rules="rules" :model="password" ref="pwdForm">
        <el-form-item label="原始密码：" prop="oldPwd">
            <el-input type="password" style="width: 300px" placeholder="请输入原始密码"  v-model="password.oldPwd">
                <template #prefix>
                    <el-icon><Lock/></el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item label="新密码："  prop="newPwd">
            <el-input type="password" style="width: 300px" placeholder="请输入新密码" v-model="password.newPwd">
                <template #prefix>
                    <el-icon><Lock/></el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item label="重复密码：" prop="rePwd">
            <el-input type="password" style="width: 300px" placeholder="请输入重复密码"  v-model="password.rePwd">
                <template #prefix>
                    <el-icon><Lock/></el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item label="" >
            <el-button type="primary" @click="updatePwd">修改</el-button>
            <el-button type="info" native-type="reset">重置</el-button>
        </el-form-item>
    </el-form>
</div>
<script>
    var option={
        data(){
            return {
                password:{
                    oldPwd:undefined,
                    newPwd:undefined,
                    rePwd:undefined
                },
                rules:{
                    oldPwd:[
                        {required:true,message:'原始密码不能为空',trigger:'blur'},
                        {validator:this.checkOldPwd,message: '原始密码输入有误',trigger: 'blur'}
                    ],
                    newPwd:[
                        {required:true,message:'新密码不能为空',trigger:'blur'}
                    ],
                    rePwd:[
                        {required:true,message:'重复密码不能为空',trigger:'blur'},
                        {validator:this.checkRePwd,message: '两次密码不一致',trigger: 'blur'}
                    ]
                }
            }
        },
        methods:{
            checkOldPwd(rules,value,callback){
                let user=JSON.parse(sessionStorage.getItem("Teacher"));
                if(user.userPwd!=value){
                    callback(new Error()); //验证不通过
                }else{
                    callback();//验证通过
                }
            },
            checkRePwd(rules,value,callback){
                if(value!=this.password.newPwd){
                    callback(new Error()); //验证不通过
                }else{
                    callback();//验证通过
                }
            },
            updatePwd() {
                let _this = this;
                this.$refs.pwdForm.validate(value => {
                    if (value) {
                        let user = JSON.parse(sessionStorage.getItem("Teacher"));
                        user.userPwd = _this.password.newPwd;
                        axios.post("user/changePwd", user).then(resp => {
                            if (resp.data.code == 200) {
                                alert(resp.data.msg);
                                sessionStorage.removeItem("Teacher");
                                parent.location.href = "login.html";
                            } else {
                                alert(resp.data.msg);
                            }
                        });
                    }
                });
            }
        }
    }
    var app=Vue.createApp(option);
    for(const[key,component] of Object.entries(ElementPlusIconsVue)){
        app.component(key,component);
    }
    app.use(ElementPlus,{locale:ElementPlusLocaleZhCn});
    app.mount("#app");
</script>
</body>
</html>